<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <link rel="shortcut icon" href="./images/bijiben.png" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>校园骑行证申请表</title>
    <!-- jQuery的CDN引入 -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <!-- 引入viewUI start -->
    <link
      rel="stylesheet"
      type="text/css"
      href="http://unpkg.com/view-design/dist/styles/iview.css"
    />
    <script type="text/javascript" src="js/vue.js"></script>
    <script
      type="text/javascript"
      src="http://unpkg.com/view-design/dist/iview.min.js"
    ></script>
    <!-- 引入viewUI end -->

    <link rel="stylesheet" href="css/loader.css" />

    <style>
      .clearfix::after {
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
      }
      /* 添加申请信息card */

      .applyFormCard {
        width: 30%;
        float: left;
        margin-top: 25px;
        margin-left: 150px;
        margin-bottom: 25px;
        /* left: 35%; */
        /* margin: 50px auto; */
      }
      /* 添加图片 */
      /* .img-box {
            position: absolute;
            width: 120px;
            height: 120px;
            left: 0;
            right: 0;
            top: 10px;
            bottom: 0;
            margin: auto;
        }

        .img-box img {
            width: 120px;
            height: 120px;
        }

        .addImgBox .ivu-input-type-file .ivu-input {
            height: 200px;
            width: 200px;

            background: url("images/add.png") no-repeat;
            background-position: 0 10px;
        } */

      .first,
      .second,
      .third {
        display: flex;
        justify-content: center;
      }

      .image1,
      .image2,
      .image3 {
        width: 243px;
        height: 141px;
        border: 3px solid #b8b3b3;
        /* background-color: #f3f5f4; */
        text-align: center;
        vertical-align: top;
        margin-top: 13px;
        margin-left: 8px;
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #img1,
      #img2,
      #img3 {
        width: auto;
        height: 100%;
      }
      /* 提交 */
      /* .sub-btn {
            width: 92px;
            height: 35px;
            background-color: #e1251a;
            display: block;
            margin: 25px 0 0 94px;
            border: none;
            outline: none;
            color: #fff;
            cursor: pointer;
        } */
      /* 两张大图 */

      .bigTwoImg {
        width: 50%;
        height: 50%;
      }
      /* div.ivu-form-item-content {
            margin-left: 0;
        } */
    </style>
  </head>

  <body>
    <div id="applyForm">
      <video
        id="myvideo1"
        width="400"
        height="400"
        autoplay
        loop
        style="float: left; margin-bottom: 100px"
      >
        <source src="mp4/发送.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <!-- <img class="bigTwoImg" src="images/车11.png" alt=""><img class="bigTwoImg" src="images/车22.png" alt=""> -->
      <!-- 信息卡片 -->
      <Card class="applyFormCard .clearfix">
        <!-- 加载动效 -->
        <Spin fix v-if="spinShow">
          <div style="height: 110px">
            <img class="loadImg spin-icon-load" src="images/轮.png" />
          </div>
          <p style="color: #999999">提交中，请勿关闭页面</p>
        </Spin>
        <i-form
          ref="applyPerson"
          :model="applyPerson"
          :rules="ruleValidate"
          :label-width="100"
          label-position="left"
        >
          <form-item label="人员类别" prop="person_type">
            <i-select
              v-model="applyPerson.person_type"
              placeholder="请选择所属类别"
            >
              <i-option value="教工">教工</i-option>
              <i-option value="学生">学生</i-option>
              <i-option value="合同工">合同工</i-option>
              <i-option value="驻校服务机构工作人员"
                >驻校服务机构工作人员</i-option
              >
              <i-option value="校内住户（租户）">校内住户（租户）</i-option>
              <i-option value="其他">其他</i-option>
            </i-select>
          </form-item>
          <form-item label="名字" prop="name">
            <i-input v-model="applyPerson.name" placeholder="请输入名字">
            </i-input>
          </form-item>
          <form-item label="邮箱(接收审核通知)" prop="email">
            <i-input
              type="email"
              v-model="applyPerson.email"
              placeholder="请输入接收审核通知的邮箱"
            ></i-input>
          </form-item>
          <form-item label="联系电话" prop="phone">
            <i-input
              v-model="applyPerson.phone"
              placeholder="请输入手机号"
            ></i-input>
          </form-item>
          <form-item label="证件号类型" prop="certificate_type">
            <radio-group v-model="applyPerson.certificate_type">
              <Radio label="工作证号">工作证号</Radio>
              <Radio label="学号">学号</Radio>
              <Radio label="身份证号">身份证号</Radio>
            </radio-group>
          </form-item>
          <form-item
            label="证件号"
            prop="certificate_id"
            minlength="10"
            show-word-limit
          >
            <i-input
              v-model="applyPerson.certificate_id"
              placeholder="请输入证件号"
            ></i-input>
          </form-item>
          <form-item label="所属单位" prop="unit">
            <i-input
              v-model="applyPerson.unit"
              placeholder="请输入所属单位"
            ></i-input>
          </form-item>
          <form-item label="是否有牌照" prop="haveLicense">
            <radio-group
              v-model="applyPerson.haveLicense"
              @on-change="handleNotHaveLicense"
            >
              <Radio label="true">是</Radio>
              <Radio label="无">否</Radio>
            </radio-group>
          </form-item>
          <form-item
            v-if="applyPerson.haveLicense=='true'"
            label="车牌号"
            prop="plate"
          >
            <i-input
              v-model="applyPerson.plate"
              placeholder="请输入车牌号"
              @input="whenInput"
            ></i-input>
          </form-item>
          <form-item label="所在校区" prop="campus">
            <i-select v-model="applyPerson.campus" placeholder="请选择所在校区">
              <i-option value="中校区">中校区</i-option>
              <i-option value="南校区">南校区</i-option>
              <i-option value="东校区">东校区</i-option>
              <i-option value="北校区">北校区</i-option>
              <i-option value="西校区">西校区</i-option>
            </i-select>
          </form-item>
          <form-item label="具体住址" prop="room">
            <i-input
              v-model="applyPerson.room"
              placeholder="请输入具体住址"
            ></i-input>
          </form-item>

          <span class="add"></span
          >上传图片：<br />(每张大小不超过10M,只支持jpg/jpeg/png格式)
          <!-- 上传图片 -->
          <div class="first">
            <div class="image1" @click="imgclick1">
              <div>点击上传身份证明</div>
              <img :src="showimg1" id="img1" />
            </div>
            <Upload
              accept=".jpg,.jpeg,.png"
              :max-size="10000"
              :before-upload="prevent1"
              :show-upload-list="true"
              action="//jsonplaceholder.typicode.com/posts/"
              style="display: none"
            >
              <i-button icon="ios-cloud-upload-outline">Upload file</i-button>
            </Upload>
          </div>
          <div style="margin: auto; text-align: center" v-if="img1 !== null">
            {{ img1.name }}
          </div>
          <div class="second">
            <div class="image2" @click="imgclick2">
              <div>点击上传车辆来历证明</div>
              <img :src="showimg2" id="img2" />
            </div>
            <Upload
              accept=".jpg,.jpeg,.png"
              :max-size="10000"
              :before-upload="prevent2"
              :show-upload-list="true"
              action="//jsonplaceholder.typicode.com/posts/"
              style="display: none"
            >
              <i-button icon="ios-cloud-upload-outline">Upload file</i-button>
            </Upload>
          </div>
          <div style="margin: auto; text-align: center" v-if="img2 !== null">
            {{ img2.name }}
          </div>
          <div class="third">
            <div class="image3" @click="imgclick3">
              <div>点击上传牌照证明<br />(申请正式骑行证需上传)</div>
              <img :src="showimg3" id="img3" />
            </div>
            <Upload
              accept=".jpg,.jpeg,.png"
              :max-size="10000"
              :before-upload="prevent3"
              :show-upload-list="true"
              action="//jsonplaceholder.typicode.com/posts/"
              style="display: none"
            >
              <i-button icon="ios-cloud-upload-outline">Upload file</i-button>
            </Upload>
          </div>
          <div style="margin: auto; text-align: center" v-if="img3 !== null">
            {{ img3.name }}
          </div>
          <!-- 上传图片 -->

          <!-- <div class="image2 " @click="uploadFile2 ">+添加车子来历证明图</div>
                    <Upload action="//jsonplaceholder.typicode.com/posts/ " @change="click() " style="display: none; ">
                        <i-button icon="ios-cloud-upload-outline ">Upload files</i-button>
                    </Upload> -->
          <!-- <i-input id="file " type="file " style="display: none; " accept="images/* " @change="upload() "></i-input> -->
          <!-- <i-input type="file " style="display: none; " accept="images/* "  @change="fileBtn2 "></i-input> -->
          <!-- <i-input type="submit " value="提交 " class="sub-btn "></i-input> -->
        </i-form>
        <div style="margin-top: 50px; display: flex; justify-content: center">
          <div style="padding: 0 10px">
            <i-button @click="handleReset('applyPerson')">清空</i-button>
          </div>
          <div style="padding: 0 10px">
            <i-button type="primary" @click="mysubmit">提交</i-button>
          </div>
        </div>
      </Card>
      <video
        id="myvideo2"
        width="400"
        height="400"
        autoplay
        loop
        style="float: right; margin-top: 30%; margin-right: 10px"
      >
        <source src="mp4/工作.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <script>
        window.onload = function () {
          $(document).ready(function () {
            video1.play();
            video2.play();
          });
        };

        //注意这个路径是相对路径
        var vList1 = ["mp4/发送.mp4"]; // 初始化播放列表
        var vLen1 = vList1.length;
        var curr1 = 0;
        var video1 = document.getElementById("myvideo1");
        if (video1.paused) {
          //判断是否处于暂停状态
          video1.play(); //开启播放
        }
        video1.addEventListener("ended", play1());

        function play1() {
          console.log("1播完了" + vList1[curr1]);
          video1.src = vList1[curr1];
          video1.muted = true;
          video1.load();
          video1.play();
          curr1++;
          if (curr1 >= vLen1) {
            curr1 = 0; //重新循环播放
          }
        }

        //注意这个路径是相对路径
        var vList2 = ["mp4/工作.mp4"]; // 初始化播放列表
        var vLen2 = vList2.length;
        var curr2 = 0;
        var video2 = document.getElementById("myvideo2");
        if (video2.paused) {
          //判断是否处于暂停状态
          video2.play(); //开启播放
        }
        video2.addEventListener("ended", play2());

        function play2() {
          console.log("2播完了" + vList2[curr2]);
          video2.muted = true;
          video2.src = vList2[curr2];
          video2.load();
          video2.play();
          curr2++;
          if (curr2 >= vLen2) {
            curr2 = 0; //重新循环播放
          }
        }
      </script>
    </div>
    <script>
      new Vue({
        el: "#applyForm ",
        data: {
          // 加载动效
          spinShow: false,

          // 展示在前端的相对地址预览
          showimg1: null,
          showimg2: null,
          showimg3: null,
          // 打包给后端的文件
          img1: null,
          img2: null,
          img3: null,

          // applyPerson的key
          applyPerson: {
            person_type: null,
            name: null,
            email: null,
            phone: null,
            certificate_type: null,
            certificate_id: "",
            unit: null,
            haveLicense: "",
            plate: this.haveLicense == "true" ? this.plate : "",
            campus: null,
            room: null,
            identification_paper_path: null,
            origin_evidence_path: null,
            licenseTag_path: null,
          },
          ruleValidate: {
            person_type: [
              {
                required: true,
                message: "请选择所属类别",
                trigger: "change",
              },
            ],
            name: [
              {
                required: true,
                message: "名字不能为空",
                trigger: "blur",
              },
            ],
            email: [
              {
                required: true,
                message: "邮箱不能为空",
                trigger: "blur",
              },
              {
                pattern:
                  /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                message: "邮箱格式不正确 ",
                trigger: "blur",
              },
            ],
            haveLicense: [
              {
                required: false,
              },
            ],

            phone: [
              {
                required: true,
                message: "手机号码不能为空",
                trigger: "blur",
              },
              // 这个是检测输入框有没有输入东西的
              {
                pattern: /^1[3456789]\d{9}$/,
                message: "手机号格式不正确 ",
                trigger: "blur ",
              },
              // 这个是真正检测手机号格式(如号码开头正不正确，位数正不正确，是不是包含了不该有的字符如字母等)的
            ],
            certificate_type: [
              {
                required: true,
                message: "请选择证件号类型",
                trigger: "change",
              },
            ],
            certificate_id: [
              {
                required: true,
                message: "证件号不能为空",
                trigger: "blur",
              },
            ],
            unit: [
              {
                required: true,
                message: "所属单位不能为空",
                trigger: "blur",
              },
            ],
            campus: [
              {
                required: true,
                message: "请选择所在校区",
                trigger: "change",
              },
            ],
            room: [
              {
                required: true,
                message: "具体住址不能为空",
                trigger: "blur",
              },
            ],
            identification_paper_path: [
              {
                message: "邮箱不能为空",
              },
            ],
            origin_evidence_path: [
              {
                trigger: "blur",
              },
            ],
          },
        },
        methods: {
          handleNotHaveLicense() {
            if (this.applyPerson.haveLicense == "无") {
              this.applyPerson.plate = "无";
            } else {
              this.applyPerson.plate = "";
            }
            // 测试
            console.log("12345678");
            console.log(this.applyPerson.plate);
          },
          // 用于测试
          whenInput() {
            // 测试
            console.log("123456");
            console.log(this.applyPerson.plate);
          },

          //   阻止自动提交
          prevent1(img) {
            // console.log(img);
            if (this.applyPerson.name == "" || this.applyPerson.name == null) {
              this.$Message.warning({
                content: "请先填写姓名",
                duration: 3,
                background: true,
              });
            } else {
              this.img1 = img;
              // console.log(this.applyPerson.name);
              this.applyPerson.identification_paper_path =
                "http://3v.gsdse.cn/UEBIMP/public/imgInfo/" +
                this.applyPerson.name +
                "/" +
                this.img1.name;
              // console.log(this.applyPerson.identification_paper_path);
              // console.log(this.img1.name);
              const reader = new FileReader();
              reader.readAsDataURL(img);
              reader.onload = () => {
                const _base64 = reader.result;
                this.showimg1 = _base64; //将_base64赋值给图片的src，实现图片预览
              };
              $(".first .image1 div").css({
                display: "none",
              });
            }
            return false;
          },
          prevent2(img) {
            if (this.applyPerson.name == "" || this.applyPerson.name == null) {
              this.$Message.warning({
                content: "请先填写姓名",
                duration: 3,
                background: true,
              });
            } else {
              this.img2 = img;
              this.applyPerson.origin_evidence_path =
                "http://3v.gsdse.cn/UEBIMP/public/imgInfo/" +
                this.applyPerson.name +
                "/" +
                this.img2.name;
              const reader = new FileReader();
              reader.readAsDataURL(img);
              reader.onload = () => {
                const _base64 = reader.result;
                this.showimg2 = _base64; //将_base64赋值给图片的src，实现图片预览
              };
              $(".second .image2 div").css({
                display: "none",
              });
            }
            return false;
          },
          prevent3(img) {
            if (this.applyPerson.name == "" || this.applyPerson.name == null) {
              this.$Message.warning({
                content: "请先填写姓名",
                duration: 3,
                background: true,
              });
            } else {
              this.img3 = img;
              this.applyPerson.licenseTag_path =
                "http://3v.gsdse.cn/UEBIMP/public/imgInfo/" +
                this.applyPerson.name +
                "/" +
                this.img3.name;
              const reader = new FileReader();
              reader.readAsDataURL(img);
              reader.onload = () => {
                const _base64 = reader.result;
                this.showimg3 = _base64; //将_base64赋值给图片的src，实现图片预览
              };
              $(".third .image3 div").css({
                display: "none",
              });
            }
            return false;
          },
          handleReset(name) {
            this.$refs[name].resetFields();
          },
          // 获取图片方法
          // 点击图片1，触发上传文件事件
          imgclick1() {
            $(".first .ivu-upload ").click();
          },
          imgclick2() {
            $(".second .ivu-upload ").click();
          },
          imgclick3() {
            $(".third .ivu-upload ").click();
          },
          // 提交
          mysubmit() {
            var that = this;
            // 阻止提交
            if (
              this.applyPerson.person_type &&
              this.applyPerson.name &&
              this.applyPerson.email &&
              this.applyPerson.phone &&
              this.applyPerson.certificate_type &&
              this.applyPerson.certificate_id &&
              this.applyPerson.unit &&
              this.applyPerson.haveLicense &&
              this.applyPerson.campus &&
              this.applyPerson.room &&
              this.img1 &&
              this.img2
            ) {
              that.spinShow = true;
              var myformdata = new FormData();

              // 传信息
              myformdata.append("person_type", that.applyPerson.person_type);
              myformdata.append("name", that.applyPerson.name);
              myformdata.append("email", that.applyPerson.email);
              myformdata.append("phone", that.applyPerson.phone);
              myformdata.append(
                "certificate_type",
                that.applyPerson.certificate_type
              );
              myformdata.append(
                "certificate_id",
                that.applyPerson.certificate_id
              );
              myformdata.append("unit", that.applyPerson.unit);
              myformdata.append("haveLicense", that.applyPerson.haveLicense);
              myformdata.append("plate", that.applyPerson.plate);
              myformdata.append("campus", that.applyPerson.campus);
              myformdata.append("room", that.applyPerson.room);
              myformdata.append(
                "identification_paper_path",
                that.applyPerson.identification_paper_path
              );
              myformdata.append(
                "origin_evidence_path",
                that.applyPerson.origin_evidence_path
              );
              myformdata.append(
                "licenseTag_path",
                that.applyPerson.licenseTag_path
              );

              // 传文件
              myformdata.append("img1", that.img1);
              myformdata.append("img2", that.img2);
              myformdata.append("img3", that.img3);

              // 请求
              $.ajax({
                url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/uploadImgInfo",
                type: "POST",
                data: myformdata,
                timeout: 600000,
                //ajax2.0可以不用设置请求头，但是jquery帮我们自动设置了，这样的话需要我们自己取消掉
                contentType: false,
                //取消帮我们格式化数据，是什么就是什么
                processData: false,
                success(res) {
                  if (res.error_code == 0) {
                    that.$Notice.success({
                      title: "申请成功",
                    });
                    // that.handleReset('applyPerson');
                  } else if (res.error_code == 1) {
                    that.$Notice.error({
                      content: res.msg,
                      duration: 3,
                      background: true,
                    });
                  } else if (res.error_code == 2) {
                    that.$Message.warning({
                      content: res.msg,
                      duration: 3,
                      background: true,
                    });
                  }
                },
                error() {
                  that.$Notice.error({
                    title: "mysubmit_ajax请求失败",
                  });
                  console.log("mysubmit_ajax请求失败");
                },
                complete() {
                  that.spinShow = false;
                },
              });
            } else {
              that.$Message.warning({
                content: "请把信息填写完整！",
              });
            }
          },
        },
        mounted() {},
      });
    </script>
  </body>
</html>
